<template>
	<view class="ring-charts-box">
		<!-- 圆环图 -->
		<qiun-data-charts type="ring"  :canvasId="canvasId" :eopts="ringOpts" 
		:chartData="chartData" :echartsH5="true" :echartsApp="true"/>
	</view>
</template>

<script>
import { Ring } from "@/utils/echarts.config.js"
export default {
	name: 'ringChart',
	props: {
		canvasId: {
			type: String
		},
		dataList: {
			type: Array,
			default:function(){
			  return []
			}
		},
		ringName: {
			type: Array,
			default:function(){
				return ['租房提取','购房提取','离退休提取','大病提取']
			}
		},
		color: {
				type: Array,
				default:function(){
					return ['#4F7CF6','#5AD8A6','#7585A2','#EE6666','#FFC93E']
				}
		},
		unitName: {
			type: String,
			default:function(){
				return '%'
			}
		}
	},
	data() {
		return {
			ringOpts:{
				...Ring,
			},
			chartData: {
			  series:[{}], //必须是这个结构，否则一直是动画
			},
		}
	},
	watch: {
			dataList: function(newValue,oldValue){
				if(Array.isArray(newValue)){
					this.showEchart({
						data: newValue,
						ringName: this.ringName,
						unitName: this.unitName,
						color: this.color
					})
				}
			}
	},
	
	created(){
		
	},
	mounted() {
		this.showEchart({
			data: this.dataList,
			ringName: this.ringName,
			unitName: this.unitName,
			color: this.color
		})
	},
	methods: {
		showEchart(chartData){
			let dataItems=chartData.data.map((item)=>{
				item.name=this.splitStr(item.name)
				return item
			})
			
			let unitName=''
			let colors=chartData.color
			let options = {
				  title: {
					text: chartData.ringName,
					left: 'center',
					textStyle: {
					  color: '#444',
					  fontWeight: 'normal',
					  fontSize: 14
					}
				  },
				  series: dataItems.map(function (data, idx) {
					var top = idx * 33.3;
					return {
					  type: 'pie',
					  radius: [40, 60],
					  top: top + '%',
					  height: '12.33%',
					  left: 'center',
					  color:colors,
					  width: 400,
					  itemStyle: {
						borderColor: '#fff',
						borderWidth: 1
					  },
					  label: {
						alignTo: 'edge',
						fontSize:12,
						formatter: '{d}%'+' '+'{time|{c}'+unitName+'}\n{hr|}\n{name|{b}}',
						//extraCssText:'width:120px;white-space:pre-wrap;',
						borderRadius: 2,
						minMargin: 0,
						edgeDistance: 0,
						lineHeight: 12,
						width:60,
						distanceToLabelLine: 0,
						rich: {
							hr: {
									borderColor: '#7585A2',
									width: '100%',
									borderWidth: 1,
									fontSize:11,
									height: 0,
									borderType: 'dashed',
						  },
						  name:{
							align:'left',
							color: '#666666',
							fontSize: 11,
							lineHeight:8,
						  },
						  time: {
							fontSize: 11,
							color: '#666666'
						  }
						}
					  },
					  labelLine: {
						length:10,
						maxSurfaceAngle: 50
					  },
					  data: dataItems
					};
				  })
				}
				this.chartData=options
		},
		splitStr(titleStr){
			let arr1 =  titleStr.split('')
			let str1 = ""
			for(let i=0,s;s=arr1[i++];){
			    str1+=s;
			    if((i%5)==0) str1+='\n';//可以根据自己实际的需要来截取每几个字换行
			}
			return str1
		}
	}
};
</script>

<style scoped>
	.ring-charts-box{
		height:560rpx;
		
	}
</style>
